html,body{  
    margin: 0;  
    padding: 0;
}  
#wrap_body{
    width: 100%;  
    overflow: hidden;  
   /* background: #ccc;*/
}
#main{  
    width: 100%;  
    background: #ccc;  
    position: relative;
    z-index:0; 
    /*transition: top 0.3s ease-in*/;
}
.navbar{
    position: fixed;
    z-index:1; 
    top:0px;
    width:100%;
    height:58px;
    overflow: hidden;
    background: #000;
}
.navbar_menu{
    display:block;
    float:right;
    height:100%;
}
.navbar_menu_item{
    position:relative;
    top:0px;
    display:none;
    float:left;
    height:100%;       
    margin:0 15px;
    cursor:pointer;
    transition:top .3s;
}
.navbar_menu_item:hover{
    top:-100% !important;
}
.menu_item_span{
    display: block;
    width:100%;
    height:100%;
    font-size: 20px;
    color:#fff;
    line-height:50px;
}
.menu_item_span_hover{
    display: block;
    width:100%;
    height:100%;
    font-size: 20px;
    color:#00ffb8;
    line-height:50px;
}
#nav_can{
    margin-top:0px;
    margin-right:25px;
    cursor:pointer;
   /* background-color: #fff;*/
}
.page{  
    width:100%;  
}  
#home_page{  
    position:relative;
    background:#000;  
}  
/*#introduce_page{  
    background:#6CE26C;  
}  */
/* #group_page{  
    background:#BF4938;  
}   */
#event_page{ 
    position:relative; 
    overflow:hidden; 
    background-color: #000;
} 
#production_page{  
    background:#000;  
}

#signup_page{     
    font-family: 'Roboto',sans-serif;
    text-align: center;
    background-color: #000;
   
}
#home_can{
    position:relative;
    z-index:0;
}
.home_page_item{
    position:absolute;
    z-index:1;
    width:11%;
    height:30%;  
    background-size: 100% auto;
    background-repeat: no-repeat; 
    cursor:pointer;
}
.home_page_item:hover{
    -webkit-transform: scale(1.3,1.3);
    -o-transform: scale(1.3,1.3);
    -moz-transform: scale(1.3,1.3);
    -ms-transform: scale(1.3,1.3);
    transform: scale(1.3,1.3);
    -webkit-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    transition:all 0.3s linear;
}
#join_item{    
    top:58%;
    left:10%;
    background-image:url(../images/join.png);    
}
#web_item{    
    top:50%;
    left:38%;
    background-image:url(../images/web.png);
    
}
#design_item{    
    top:31%;
    left:52%;
    background-image:url(../images/design.png);
    
}
#ios_item{    
    top:17%;
    left:65%;
    background-image:url(../images/ios.png);
    
}
#pm_item{    
    top:31%;
    left:77%;
    background-image:url(../images/pm.png);
    
}
#lab_item{    
    top:64%;
    left:83%;
    background-image:url(../images/lab.png);
   
}
#android_item{    
    top:64%;
    left:54%;
    background-image:url(../images/android.png);
   
}
#game_item{    
    top:54%;
    left:67%;
    background-image:url(../images/game.png);
    
}
.event_years{
    position:relative;
    z-index:10;
    top:0%;
    visibility: visible;
}
#event_can{ 
    position: relative;
    z-index:1;
    background-color: #000;
}

.event_detail{
    position:relative;
    /* top:-100%; */
    visibility: hidden;
    z-index:-10;
    overflow: hidden;
}

#inner{
    position:absolute;
    z-index:2;
    -moz-transition: left 1s;
    -webkit-transition: left 1s;
    -o-transition: left 1s ;
    transition: left 1s ;
    /*opacity:0;*/

}
.inner_item{
    position:relative;
    display:table-cell;

}
#event_prev,#event_next{
    position:absolute;
    z-index:2;
    width:100px;
    height:100%;
    opacity: 0;
    cursor:pointer;
}
#event_prev{
    top:0px;
    left:0px;
}
#event_next{
    top:0px;
    right:0px;
}
#event_back{
    position:absolute;
    z-index:2;
    bottom:5%;
    left:5%;
    width:0px;
    height:0px;
    border-top:14px solid transparent;
    border-bottom:14px solid transparent;
    border-right:24px solid #00ffb8;
    cursor:pointer;
}
#event_back:hover{
    border-top:14px solid transparent;
    border-bottom:14px solid transparent;
    border-right:24px solid #00ffb8;
}
#indicators{
    position:absolute;
    z-index:3;
    top:90%;
    left:50%;
    margin-left:-215px;
    
    
}
#indicators li{
    float: left;
    width:10px;
    height:10px;
    margin-right:24px;
    border-radius: 50%;
    list-style:none;
    background-color: #fff;
    cursor:pointer;
}
.active{
    width:15px !important;
    height:15px  !important;
    margin-top:-2px;
    background-color:#00ffb8 !important;
}
.event_imageBox{
    position:absolute;
    z-index:1;
    width:60%;
    height:90%;
    top:10%;
    left:20%;
}
.event_image{
    position:absolute;
    width:100%;
    height:100%;
    margin:auto auto;
    opacity: 0;
    transform: scale(0.75,0.75);
    transition: all 1s ease-out;
}
.event_text{
    position: absolute;
    /*z-index:2;*/
    top:42%;
    width:100%;
    text-align:center;
    color:#fff;
    opacity: 1;
}
.event_h{
    font-size:7rem;
}
.event_p{
    font-size:3rem;
}


.years{
    position:absolute;
    z-index:2;
    color:#00ffb8;
    font-size:18px;
    cursor:pointer;
}
.years:hover{
    font-size:25px;
}
#years_1{
    top:34%;
    left:13%;
}
#years_2{
    top:66%;
    left:22%;
}
#years_3{
    top:31%;
    left:27%;
}
#years_4{
    top:67%;
    left:38%;
}
#years_5{
    top:33%;
    left:52%;
}
#years_6{
    top:68%;
    left:59%;
}
#years_7{
    top:40%;
    left:67%;
}
#years_8{
    top:30%;
    left:79%;
}
#years_9{
    top:76%;
    left:82%;
}
#years_10{
    top:35%;
    left:89%;
}
.point{
    position:absolute;
    z-index: 2;
    width:10px;
    height:10px;
    cursor:pointer;
}
#point_1{
    top:51.5%;
    left:9.6%;
}
#point_2{
    top:49.5%;
    left:18.7%;
}
#point_3{
    top:52.5%;
    left:27.6%;
}
#point_4{
    top:45.4%;
    left:38.7%;
}
#point_5{
    top:51.5%;
    left:48.7%;
}
#point_6{
    top:47.7%;
    left:59.6%;
}
#point_7{
    top:57.5%;
    left:67.7%;
}
#point_8{
    top:51.5%;
    left:75.7%;
}
#point_9{
    top:55.5%;
    left:82.7%;
}
#point_10{
    top:51.4%;
    left:89.6%;
}




h1{
    font-size: 45px;
    font-weight: 500;
    letter-spacing: 4px;
    margin: 60px 0;
    color: #FFFFFF;
}


.signup_container{
    width: 20%;
    height: auto;
    margin: 0 auto;
    padding: 40px;
    background-color:rgba(10,10,10,0.77);
    border:2px ridge rgba(238,238,238,0.13);
    border-radius: 5px;
    /*rgba兼容处理*/
    -moz-box-shadow: 0 -5px 10px 1px rgba(16,16,16,0.57);
    -webkit-box-shadow: 0 -5px 10px 1px rgba(16,16,16,0.57);
    box-shadow: 0 -5px 10px 1px rgba(16,16,16,0.57);
    border-bottom: none;
    border-bottom-left-radius:initial;
    border-bottom-right-radius: initial;
}

::-webkit-input-placeholder{/* WebKit browsers */
    color: #CCCCCC;
}

:-moz-placeholder{/* Mozilla Firefox 4 to 18 */
    color: #CCCCCC;
}

::-moz-placeholder{ /* Mozilla Firefox 19+ */
    color: #CCCCCC;
}

:-ms-input-placeholder{ /* Internet Explorer 10+ */
    color: #CCCCCC;
}

input[type='text'],#gender,#majorGroup{

    /*margin-bottom: 20px;*/
    padding: 10px;
    background-color: transparent;
    border:none;
    font-size: 15px;
    border-bottom: 1px solid rgba(238,238,238,0.41);
    outline: none;
    color:#FFFFFF;
}

input[type='text']{
    width: 90.4%;
}
#gender,#majorGroup{
    width: 94.4%;
}

.selectbg{
    background-color:rgba(10,10,10,0.77);
}

textarea{
    /*height: 150px;*/
    height: auto;
    width:88%;
    /*margin-bottom: 20px;*/
    padding: 10px;
    background-color: transparent;
    font-size: 15px;
    border-bottom: 1px solid rgba(238,238,238,0.41);
    color:#FFFFFF;
}

input[type="button"]{
    width: 60%;
    padding: 10px 0;
    font-size: 16px;
    font-weight: 100;
    background-color: transparent;
    color: #CCC;
    border: 1px solid rgba(238, 238, 238, 0.41);
    border-width: thin;
    cursor: pointer;
    outline: none;
    transition:0.5s all;
    -webkit-transition:0.5s all;
    -moz-transition:0.5s all;
    -o-transition:0.5s all;
    -ms-transition:0.5s all;
    text-decoration: none;
}

/*自适应设置*/
@media screen and (max-width: 1920px){
    .signup_container{
        width: 20%;
    }
    .container{
        width:100%;
        height:100%;
    }
}

@media screen and (max-width: 1440px){
    .signup_container{
        width: 25%;
    }
    .container{
        width:100%;
        height:100%;
    }
}


@media screen and (max-width: 1280px) {
    .signup_container {
        width: 30%;
    }
    .container{
        width:100%;
        height:100%;
    }
}

@media screen and (max-width: 1024px) {
    .signup_container {
        width: 35%;
    }
    .container{
        width:100%;
        height:100%;
    }
}

@media screen and (max-width: 966px) {
    .signup_container {
        width: 40%;
    }
    .container{
        width:100%;
        height:100%;
    }
}

@media screen and (max-width:603px) {
    .signup_container {
        width:45%;
    }
    .container{
        width:100%;
        height:100%;
    }
}
@media screen and (max-width:414px) {
    .signup_container {
        width:50%;
    }
    h1{
        font-size: 30px;
    }
    .container{
        width:100%;
        height:100%;
    }
}

@media screen and (max-width:320px) {
    .signup_container {
        width:55%;
    }
    h1{
        font-size: 20px;
    }
    .container{
        width:100%;
        height:100%;
    }

}

p.gray{
    color:gray;
}
p.red{
    color:#f00;
}
.hide{
    display:none;
}
.show{
    display:block;
}
p{
    font-size: 5px;
    height: 10px;
}  